<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Order Appointments</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.9/css/layui.min.css">
    <style>
        .layui-container {
            display: flex;
            justify-content: center;
        }

        .main-container {
            display: flex;
        }

        .chart-container {
            flex: 1;
        }

        .info-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .info-item {
            text-align: center;
            font-size: 24px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<fieldset class="table-search-fieldset">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" lay-filter="demo" action="">
            <div class="layui-inline">
                <label class="layui-form-label">起始日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="date1" id="start-date" placeholder="任何" class="layui-input demo-table-search-date">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">终止日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="date2" id="end-date" readonly placeholder="任何" class="layui-input demo-table-search-date">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户号</label>
                <div class="layui-input-inline">
                    <input type="text" name="sysid" class="layui-input">
                </div>
            </div>
            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
        </form>
    </div>
</fieldset>

<div class="layui-container">
    <div class="main-container">
        <div class="chart-container">
            <div id="main" style="width: 800px; height: 500px;"></div>
        </div>
        <div class="info-container" style="margin-top: 150px; height: 200px; width: 200px; border: 2px solid black; border-radius: 50%;">
            <div id="total-money" class="info-item"></div>
            <div id="total-orders" class="info-item"></div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/layui/2.6.9/layui.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/5.2.2/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    var dates;
    var orderData;
    var incomeData;
    var maxOrderNumber;
    var maxMoney;
    var totalMoney;
    var totalOrderNumber;
    option && myChart.setOption(option);

    layui.use(['form', 'table', 'laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        laydate = layui.laydate;

        laydate.render({
            elem: '.demo-table-search-date'
        });

        // 设置起始日期和终止日期的初始值
        var today = new Date();
        var oneWeekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
        var startDateInput = document.getElementById('start-date');
        var endDateInput = document.getElementById('end-date');
        startDateInput.value = formatDate(oneWeekAgo);
        endDateInput.value = formatDate(today);

        // 触发表单提交事件
        form.on('submit(data-search-btn)', function (data) {
            // 获取表单数据
            var formData = new FormData();
            formData.append('sysid', data.field.sysid);
            formData.append('date1', data.field.date1);
            formData.append('date2', data.field.date2);

            // 发送请求到后端
            axios.post('http://localhost:8080/money/findSome', formData, {
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
                .then(function (response) {
                    // 处理返回的数据
                    // 提取日期数据
                    var responseData = response.data.data;
                    dates = responseData[2];

                    // 提取成交订单数数据
                    incomeData = responseData[0];

                    // 提取收入数据
                    orderData = responseData[1];
                    maxOrderNumber = responseData[5];
                    maxMoney = responseData[6];
                    totalMoney = responseData[3];
                    totalOrderNumber = responseData[4];


                    var totalMoneyElement = document.getElementById('total-money');
                    var totalOrdersElement = document.getElementById('total-orders');

                    totalMoneyElement.textContent = '总金额：' + totalMoney + '元';
                    totalOrdersElement.textContent = '总订单数：' + totalOrderNumber + '单';

                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        legend: {
                            data: ['成交订单数', '收入']
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: dates,
                                axisPointer: {
                                    type: 'shadow'
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '成交订单数',
                                min: 0,
                                max: maxOrderNumber,
                                interval: maxOrderNumber/5,
                                axisLabel: {
                                    formatter: '{value} 单'
                                }
                            },
                            {
                                type: 'value',
                                name: '收入',
                                min: 0,
                                max: maxMoney,
                                interval: maxMoney/5,
                                axisLabel: {
                                    formatter: '{value} 元'
                                }
                            }
                        ],
                        series: [
                            {
                                name: '成交订单数',
                                type: 'bar',
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' 单';
                                    }
                                },
                                data: orderData
                            },
                            {
                                name: '收入',
                                type: 'line',
                                yAxisIndex: 1,
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' 元';
                                    }
                                },
                                data: incomeData
                            }
                        ]
                    };
                    myChart.setOption(option);
                })
                .catch(function (error) {
                    // 请求失败的处理逻辑
                    console.error(error);
                });

            return false; // 阻止表单默认提交
        });

        // 格式化日期函数
        function formatDate(date) {
            var year = date.getFullYear();
            var month = String(date.getMonth() + 1).padStart(2, '0');
            var day = String(date.getDate()).padStart(2, '0');
            return year + '-' + month + '-' + day;
        }

        // 自动触发表单提交事件
        $('.layui-btn-primary').trigger('click');
    });


</script>

</body>
</html>
